<% content_for(:title, "Components: Icons") %>

<%= render layout: "layout", locals: { wrapper: false } do %>
  <div class="grid">
    <%= container do |c| %>
      <% c.sidebar class: "order-first" do %>
        <h2>Font Awesome: <small>Solid</small></h2>
        <p>Insert a solid icon using the icon helper with <code>icon("fas fa-{{name}}")</code>.
        <p>This produces the following HTML:<br /><code>&lt;i class="fas fa-{{name}}&gt;&lt;i&gt;</code>.</p>
      <% end %>

      <%= row do %>
        <% FontAwesome::SOLID.each do |icon_name| %>
          <%= col(6, md: 4, lg: 3) do %>
            <%= icon("fas fa-#{icon_name} fa-fw mr-2 text-muted") %>
            <span class="text-dark"><%= icon_name %></span>
          <% end %>
        <% end %>
      <% end %>
    <% end %>

    <%= container do |c| %>
      <% c.sidebar class: "order-first" do %>
        <h2>Font Awesome: <small>Regular</small></h2>

        <p>Insert a regular icon using the icon helper with <code>icon("far fa-{{name}}")</code>.
        <p>This produces the following HTML:<br /><code>&lt;i class="far fa-{{name}}&gt;&lt;i&gt;</code>.</p>
      <% end %>

      <%= row do %>
        <% FontAwesome::REGULAR.each do |icon_name| %>
          <%= col(6, md: 4, lg: 3) do %>
            <%= icon("far fa-#{icon_name} fa-fw mr-2 text-muted") %>
            <span class="text-dark"><%= icon_name %></span>
          <% end %>
        <% end %>
      <% end %>
    <% end %>

    <%= container do |c| %>
      <% c.sidebar class: "order-first" do %>
        <h2>Font Awesome: <small>Brands</small></h2>

        <p>Insert a brand icon using the icon helper with <code>icon("fab fa-{{name}}")</code>.
        <p>This produces the following HTML:<br /><code>&lt;i class="fab fa-{{name}}&gt;&lt;i&gt;</code>.</p>
      <% end %>

      <%= row do %>
        <% FontAwesome::BRANDS.each do |icon_name| %>
          <%= col(6, md: 4, lg: 3) do %>
            <%= icon("fab fa-#{icon_name} fa-fw mr-2 text-muted") %>
            <span class="text-dark"><%= icon_name %></span>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  </div>
<% end %>
